<template>
  <div class="top10">
    <h1>精品好菜</h1>
    <ul>
      <li v-for="d in data" :key="d.id" @click="handleClick(d.id)">
        <div class="img">
          <img :src="d.img" alt="d.name">
        </div>
        <div class="info">
          <h2>{{ d.name }}</h2>
          <h3>{{ d.all_click }}浏览 {{ d.favorites }}收藏</h3>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
  export default {
    props: ['data'],

    methods: {
      handleClick(id) {
        this.$router.push({
          name: 'detail',
          query: {
            id
          }
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
.top10 {
  h1 {
    height: .5rem;
    padding-left: .1rem;
    padding-top: .2rem;
    font-weight: 400;
    color: #666;
  }

  ul {
    display: flex;
    flex-wrap: wrap;
    padding-left: .1rem;
    li {
      width: 50%;
      padding-right: .1rem;
      margin-bottom: .1rem;
      .img {
        font-size: 0;
        height: 0;
        padding-bottom: 66.66666667%;
        img {
          width: 100%;
        }
      }
      div.info {
        height: .6rem;
        background-color: #fff;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        h2 {
          font-size: .18rem;
        }
        h3 {
          font-weight: 100;
          color: #666;
        }
      }
    }
  }
}
</style>